<template>
  <el-table :data="orderData" border style="width: 100%">
    <el-table-column
      prop="orderDetail"
      align="center"
      label="产品图片"
      width="130"
    >
      <!-- 插槽作用域 -->
      <template v-slot="scope">
        <el-avatar
          shape="square"
          :size="80"
          fit="scale-down"
          :src="scope.row.orderDetail[0].imageUrl"
        ></el-avatar>
      </template>
    </el-table-column>
    <el-table-column
      prop="order_id"
      align="center"
      label="订单编号"
      width="250"
    >  
    </el-table-column>
    <el-table-column
      prop="orderDetail[0].productName"
      align="center"
      label="产品名称"
      width="180"
    >
    </el-table-column>
    <el-table-column
      prop="orderDetail[0].quantity"
      width="100"
      align="center"
      label="数量"
    >
    </el-table-column>
    <el-table-column prop="total_fee" width="100" align="center" label="总价格">
    </el-table-column>
    <el-table-column
      prop="create_time"
      align="center"
      width="180"
      label="创建时间"
    >
    </el-table-column>
    <el-table-column
      prop="pay_status"
      width="100"
      align="center"
      label="支付状态"
    >
      <template v-slot="{ row }">
        {{ row.pay_status === 1 ? "已支付" : "未支付" }}
      </template>
    </el-table-column>
    <el-table-column
      prop="order_status"
      width="100"
      align="center"
      label="订单状态"
    >
      <template v-slot="{ row }">
        <span v-if="row.order_status == 0">未提交</span>
        <span v-else-if="row.order_status == 1">提交成功</span>
        <span v-else-if="row.order_status == 2">已经取消</span>
        <span v-else-if="row.order_status == 3">无效订单</span>
        <span v-else-if="row.order_status == 4">交易关闭</span>
        <span v-else-if="row.order_status == 5">退货</span>
      </template>
    </el-table-column>
    <el-table-column prop="opration" align="center" label="操作">
      <template v-slot="{ row }">
        <el-button
          type="primary"
          v-hasPay="[row.pay_status, row.order_status]"
          icon="iconfont icon-chongzhi"
          @click="goPay(row)"
        >
          去支付
        </el-button>
        <el-button type="danger" icon="el-icon-delete" @click="deleteOrder(row)"> 删除 </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import * as payApi from "@/api/pay";
import {mapActions} from "vuex"
import { Loading } from 'element-ui';
export default {
  directives: {
    hasPay: {
      inserted(el,binding){
        //console.log(el,binding);
        let [pay_status,order_status]=binding.value
        let className=el.className
        if(pay_status!==0||order_status!==1){
          el.disabled=true
          el.className=className+" is-disabled"
        }
      }
    }
  },
  methods: {
    goPay(row){
      this.$router.push({name: "pay",query: {
        order_id: row.order_id
      }})
    },
    async getInit() {
      let res=await payApi.queryOrderDetails()
    //console.log(res);
    this.orderData=res.data.data
    },
    //删除this.orderData中order_id和row中
    deleteOrder(row){
      console.log(row);
      console.log(this.orderData);
      payApi.deleteOrder(row.order_id).then(res => {
        const { status, msg } = res;
        if(status == 200) {
          this.getInit()
        }
      })
    }
  },
  data() {
    return {
      orderData: [],
    };
  },
  meta: {
    title: "order", 
    icon: "iconfont icon-dd",
  },
  async created(){
    this.getInit()
  },

};
</script>
<style lang="less" scoped>
  .el-avatar {
    background-color: rgba(0,0,0,0);
    height: 30px;
    /deep/ img {
      width: 100%;
    }
  }
</style>